<template>
  <div class="container2">
    <el-card class="card1">
      <template #header>
        <div class="header">个人资料</div>
      </template>
      <div class="body">
        <el-image style="width: 100px; height: 100px; border-radius: 50%" :src="user.user.avatar" :zoom-rate="1.2" :max-scale="7" :min-scale="0.2" :preview-src-list="[user.user.avatar]" fit="cover" />
        <BasicDetail :form="form" :list="list" label-position="left" label-width="auto">
          <template #gender="{ gender }">
            <el-input :value="gender ? '男' : '女'" />
          </template>
          <template #identity="{ identity }">
            <el-input :value="getIdentity(identity)" />
          </template>
        </BasicDetail>
      </div>
    </el-card>

    <el-card class="card2">
      <template #header>
        <div class="header">基本资料</div>
      </template>
      <el-form ref="formInstall" :model="change_form" label-position="left" label-width="auto" :rules="rules">
        <el-form-item label="头像">
          <BasicUpload v-model="change_form.avatar"></BasicUpload>
        </el-form-item>
        <el-form-item label="姓名" prop="name">
          <el-input v-model="change_form.name" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="年龄" prop="age">
          <el-input v-model="change_form.age" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="性别" prop="gender">
          <el-select v-model="change_form.gender" placeholder="请选择">
            <el-option label="男" :value="1" />
            <el-option label="女" :value="0" />
          </el-select>
        </el-form-item>
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="change_form.phone" type="number" placeholder="请输入" />
        </el-form-item>
        <el-form-item label="邮箱" prop="email">
          <el-input v-model="change_form.email" type="email" placeholder="请输入" />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm">确定</el-button>
          <el-button type="primary" @click="restForm">重置</el-button>
          <el-button @click="cancleForm">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script setup>
import useUserStore from '@/store/user'
import { computed, onMounted, ref, reactive, watchEffect } from 'vue'
import { cloneDeep } from 'lodash'
import { updateApi } from '@/api/user/index'

// 个人资料
const user = useUserStore()
const form = ref({})
watchEffect(() => {
  form.value = user.user
})
const list = [
  {
    label: '账号',
    field: 'account',
  },
  {
    label: '姓名',
    field: 'name',
  },
  {
    label: '年龄',
    field: 'age',
  },
  {
    label: '性别',
    field: 'gender',
  },
  {
    label: '手机号',
    field: 'phone',
  },
  {
    label: '邮箱',
    field: 'email',
  },
  {
    label: '身份',
    field: 'identity',
  },
]
const getIdentity = computed(() => {
  return (identity) => {
    switch (identity) {
      case 1:
        return '管理员'
      case 2:
        return '学生'
      case 3:
        return '教师'
    }
  }
})

// 基本信息
const change_form = ref({
  name: '',
  age: '',
  gender: '',
  phone: '',
  email: '',
  avatar: '',
})
change_form.value = cloneDeep(Object.assign(user.user))
const rules = reactive({
  name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
  age: [{ required: true, message: '请输入年龄', trigger: 'blur' }],
  gender: [{ required: true, message: '请选择性别', trigger: 'blur' }],
  phone: [
    { required: true, message: '手机号不能为空', trigger: 'blur' },
    { pattern: /^1[3-9]\d{9}$/, message: '请输入正确格式的手机号', trigger: 'blur' },
  ],
  email: [
    { required: true, message: '邮箱不能为空', trigger: 'blur' },
    { pattern: /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/, message: '请输入正确格式的邮箱', trigger: 'blur' },
  ],
})
const cancleForm = () => {
  change_form.value = cloneDeep(user.user)
}
const formInstall = ref(null)
const submitForm = () => {
  formInstall.value.validate(async (valid) => {
    if (valid) {
      const res = await updateApi(change_form.value)
      if (res.code == 200) {
        user.user = res.data
        ElMessage.success(res.msg)
      } else {
        ElMessage.error(res.msg)
      }
    }
  })
}

const restForm = () => {
  formInstall.value.resetFields()
}
</script>

<style scoped lang="scss">
.container2 {
  height: calc(100vh - 175px);
  margin: 30px;
  margin-right: 0px;
  display: flex;

  .card1 {
    height: 100%;
    overflow: auto;
    width: 40%;
    .header {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
    }
    .body {
      text-align: center;
    }
  }

  .card2 {
    width: 100%;
    height: 100%;
    overflow: auto;
    margin: 0 30px;
    :deep(.el-form-item__content) {
      display: flex;
      justify-content: center;
    }
    .header {
      text-align: center;
      font-size: 20px;
      font-weight: 600;
    }
  }
}
</style>
@/store/user.js
